<template>
  <div class="homework-assign">
    <!-- 作业标题 -->
    <van-field
        v-model="homework.title"
        placeholder="请输入作业标题"
        label="标题："
        class="text"
    >

    </van-field>

    <!-- 作业内容 -->
    <van-field
        type="textarea"
        v-model="homework.contents"
        rows="5"
        placeholder="请输入作业内容"
        label="内容："
        class="text"
    >
    </van-field>

    <!-- 日期选择器 -->
    <van-cell class="date-picker-cell">
      <div @click="showCalendar = true" >截止日期
        <img src="../../assets/images/calendar.png" class="calendar-icon" />
        <span v-if="selectedDate">{{ selectedDate }}</span>
      </div>
    </van-cell >

    <van-calendar
        v-model:show="showCalendar"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        color="rgba(101, 242, 13, 0.622)"
    />

    <!-- 提交按钮 -->
    <van-button
        type="primary"
        class="submit-button"
        @click="submitHomework"
    >
      发布作业
    </van-button>
  </div>
</template>






<script setup>
import { ref, reactive } from 'vue';
import { Toast} from 'vant';
import axios from 'axios';

// 定义作业信息
const homework = reactive({
  title: '',
  contents: '',
  finishdate: ''
});

// 定义截止日期
const selectedDate = ref('');
// 控制日历显示隐藏
const showCalendar = ref(false);
// 最小日期限制
const minDate = ref(new Date());
// 最大日期限制，可以根据需要设置
const maxDate = ref(new Date(new Date().getFullYear() + 5, 0, 1));

// 确认选择的日期
const onConfirm = (value) => {

  selectedDate.value = value.toISOString().split('T')[0]; // 将日期转换为 'YYYY-MM-DD' 格式
  homework.finishdate = selectedDate.value; // 将格式化后的日期设置为作业的截止日期
  showCalendar.value = false; // 关闭日历
};

// 提交作业
const submitHomework = async () => {
  try {
    const response = await axios.post('/api/homework/assignHomework', homework);
    Toast.success('发布成功！');
    homework.title = '';
    homework.contents = '';
    homework.finishdate = ''; // 将作业的截止日期设置为空字符串
  } catch (error) {
    Toast.fail('发布失败');
  }
};
</script>
<style scoped>

::v-deep .van-field__label {
  width: 15%;
}


/* 其他样式保持不变 */
.homework-assign {
  padding: 20px;
  margin: 15px;
  height: 100%;
}

.text{
  margin: 5px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #1e1f22;
  width: 100%;
}

.date-picker-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  margin: 5px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #1e1f22;
}

.calendar-icon {
  width: 20px;
  margin-right: 15px;
}

.submit-button {
  margin-left: 100px;
  background-color: rgba(165, 214, 63, 0.71);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  width: 100px;
}
</style>